<template>
	<view class="selected-wrapper">
		<text class="iconfont icon-duihao selected" v-if="selected"></text>
		<text v-else class="not-selected"></text>
	</view>
</template>

<script>
export default {
	props: {
		selected: {
			type: Boolean,
			required: true,
			default: true
		}
	},
	data() {
		return {};
	}
};
</script>

<style scoped lang="less">
@theme-color: #ff5a14;
.selected-wrapper {
	display: flex;
}
.selected {
	color: #fff;
	background-color: @theme-color;
	width: 30rpx;
	height: 30rpx;
	padding: 5rpx;
	border-radius: 50%;
	border: 1rpx solid #fff;
}

.not-selected {
	width: 30rpx;
	height: 30rpx;
	padding: 5rpx;
	border-radius: 50%;
	border: 1rpx solid #ccc;
}
</style>
